<script setup lang="ts"></script>
<template>
<div class="step">
    <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-item label="选择注册地址">
            <a-radio-group v-model:value="validateInfos.area">
                <a-radio :value="item.value" v-for="item in listArea" :key="item.value">{{item.label}}</a-radio>
            </a-radio-group>
        </a-form-item>
        <a-form-item label="地址选择">
            <a-select v-model:value="validateInfos.address" placeholder="请选择">
                <a-select-option :value="item.value" v-for="item in listAddress" :key="item.value" :disabled="item.value==0">
                    <p class="address" :class="{disabled:item.value==0}">
                        <span class="t1">{{item.label.address}}</span>
                        <span class="t2">{{item.label.area}}</span>
                        <span class="t3">￥{{item.label.price}}</span>
                        <span class="t4">{{item.label.select}}人选择</span>
                    </p>
                </a-select-option>
            </a-select>
        </a-form-item>
        <a-form-item :wrapper-col="wrapperColTip" v-if="priceTotal1>0">
            <p class="right">费用 ￥{{priceTotal1}}元</p>
        </a-form-item>
        <a-form-item label="公司类型">
            <a-radio-group v-model:value="validateInfos.companyType">
                <a-radio :value="item.value" v-for="item in listCompanyType" :key="item.value">{{item.label}}</a-radio>
            </a-radio-group>
        </a-form-item>
        <a-form-item label="纳税规模">
            <a-radio-group v-model:value="validateInfos.companyScale">
                <a-radio :value="item.value" v-for="item in listScale" :key="item.value">{{item.label}}</a-radio>
            </a-radio-group>
        </a-form-item>
        <a-form-item label="您可能还需要代理记账">
            <a-radio-group v-model:value="validateInfos.agent">
                <p v-for="item in listAgent" :key="item.value"><a-radio :value="item.value" >{{item.label}}</a-radio></p>
            </a-radio-group>
        </a-form-item>
        <a-form-item :wrapper-col="wrapperColTip" v-if="priceTotal2>0">
            <p class="right">费用 ￥{{priceTotal2}}元</p>
        </a-form-item>
        <a-form-item :wrapper-col="wrapperColTip" v-if="priceTotal>0">
            <p class="right">总计 ￥{{priceTotal}}元</p>
        </a-form-item>
        <div class="center">
            <a-button type="primary" @click.prevent="onSubmit" size="large">下一步</a-button>
        </div>
    </a-form>
</div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRaw ,ref,computed} from 'vue';
import {
    useStore
} from "vuex";
import { Form } from 'ant-design-vue';
// import CountdownButton from '@/components/common/countdown-button.vue'

const useForm = Form.useForm;
export default defineComponent({
  setup() {
    const store = useStore();
    const state = store.state;
    // 注册区域
    const listArea=[
        {
            label:'上海',
            value:'1'
        },
        {
            label:'海南',
            value:'2'
        },
    ]
    // 公司地址
    const listAddress=[
        {
            label:{
                address:'注册地址',
                area:'所属区域',
                price:'注册成本',
                select:''
            },
            value:'0'
        },
        {
            label:{
                address:'上海松江园区',
                area:'松江区',
                price:'99.00',
                select:'2562'
            },
            value:'99'
        },
        {
            label:{
                address:'上海自贸区临港新片区',
                area:'自贸区',
                price:'999.00',
                select:'1777'
            },
            value:'999'
        },
        {
            label:{
                address:'上海自贸区临港新片区',
                area:'自贸区',
                price:'98.00',
                select:'1777'
            },
            value:'98'
        },
        {
            label:{
                address:'上海自贸区临港新片区',
                area:'自贸区',
                price:'9500.00',
                select:'1777'
            },
            value:'9500'
        },
    ]
    // 公司类型
    const listCompanyType=[
        {
            label:'内资有限公司（含一人有限公司）',
            value:'1'
        },
        {
            label:'工作室（个人独资公司）',
            value:'2'
        },
    ]
    // 公司规模
    const listScale=[
        {
            label:'小规模纳税人',
            value:'1'
        },
        {
            label:'一般纳税人',
            value:'2'
        },
    ]
    // 代理
    const listAgent=[
        {
            label:'3个月体验 33元/月',
            value:'99'
        },
        {
            label:'小规模纳税人 （12个月 2880元，额外赠送3个月，共15个月）',
            value:'2880'
        },
        {
            label:'一般纳税人 （12个月 5760元，额外赠送3个月，共15个月）',
            value:'5760'
        },
        {
            label:'出口退税企业 （12个月 33600元，额外赠送3个月，共15个月）',
            value:'33600'
        },
    ]
    const modelRef = reactive({
      area: '',
      address: '',
      companyType:'',
      companyScale:'',
      agent:'',
    });
    const rulesRef = reactive({
    //   code: [
    //     {
    //       required: true,
    //       message: '请输入验证码',
    //     },
    //   ],
    });
    const priceTotal1=computed(() => validateInfos.address )//小计价格1
    const priceTotal2=computed(() => validateInfos.agent )//小计价格2
    const priceTotal=computed(() => priceTotal1.value*1 + priceTotal2.value*1) //总计价格
    const { resetFields, validate, validateInfos } = useForm(modelRef, rulesRef, {
      onValidate: (...args) => console.log(...args),
    });
    const onSubmit = () => {
      validate()
        .then(() => {
          console.log(toRaw(modelRef),'提交');
          store.commit('setRegCompanyStepsCurrent',2)
        })
        .catch(err => {
          console.log('error', err);
        });
    };
    return {
      validateInfos,
      resetFields,
      modelRef,
      onSubmit,
      labelCol: { span: 4 },
      wrapperCol: { span: 19 },
      wrapperColTip: { span: 23 },
      listArea,
      listAddress,
      listCompanyType,
      listScale,
      listAgent,
      priceTotal1,
      priceTotal2,
      priceTotal,
    };
  },
});
</script>

<style lang="less" scoped>
.step {
    padding: 50px 60px;
}
.address{
    @w1:35%;
    @w2:25%;
    @w3:20%;
    @w4:20%;
    @c:#c2c4c6;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    .t1{
        width:@w1;
        flex:0 0 @w1;
    }
    .t2{
        width:@w2;
        flex:0 0 @w2;
    }
    .t3{
        width:@w3;
        flex:0 0 @w3;
    }
    .t4{
        width:@w4;
        flex:0 0 @w4;
        color: @c;
    }
    &.disabled{
        .t1,.t2,.t3,.t4{
            color: @c;
        }
    }
}
.right{
    display: flex;
    justify-content: flex-end;
}
</style>
